<template>
  <div>
    <vxe-grid border resizable height="400" :export-config="{}" :toolbar-config="{ export: true, custom: true }"
      :form-config="tableForm" :proxy-config="tableProxy" :columns="tableColumn">
      <template #btns>
        <vxe-button type="submit" content="查询"></vxe-button>
        <vxe-button type="reset" content="重置"></vxe-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
  import { VXETable } from 'vxe-table'

  // 创建一个简单的表单-输入框渲染
  VXETable.renderer.add('FormItemInput', {
    // 项内容模板
    renderItemContent(h, renderOpts, params) {
      const { data, field } = params
      const props = renderOpts.props || {}
      return <vxe-input v-model={data[field]} {...{ props }}></vxe-input>
    }
  })

  export default {
    data() {
      return {
        tableColumn: [
          { type: 'seq', width: 50 },
          { field: 'name', title: 'Name' },
          { field: 'age', title: 'Age' },
          { field: 'sex', title: 'Sex' },
          { field: 'role', title: 'Role' }
        ],
        tableToolbar: {
          export: true,
          custom: true,
          buttons: [
            { name: '刷新', code: 'reload', icon: 'vxe-icon-refresh' },
            { name: '自定义1', code: 'custom1', icon: 'vxe-icon-bell-fill' },
            { buttonRender: { name: 'ToolbarButtonDownload', events: { click: this.btnDownEvent } } }
          ],
          tools: [
            { name: '自定义2', code: 'custom2', icon: 'vxe-icon-info-circle' },
            { toolRender: { name: 'ToolbarToolPrint' } }
          ]
        },
        tableProxy: {
          ajax: {
            query: () => {
              return new Promise(resolve => {
                const list = [
                  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
                  { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
                  { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
                  { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
                  { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
                ]
                resolve(list)
              })
            }
          }
        }
      }
    },
    methods: {
      btnDownEvent() {
        this.$refs.xGrid.exportData()
      }
    }
  }
</script>